/* api */
import { getCustomerTagList } from '@src/api/SettingApi'
/* entity */
import CustomerTag from '@model/entity/CustomerTag'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* scss */
import '@src/component/business/BizCustomerTagSelect/BizCustomerTagSelect.scss'
/* util */
import * as _ from 'lodash'
import Platform from '@src/util/platform'
/* vue */
import { Component, Emit } from 'vue-property-decorator'
import Vue, { CreateElement } from 'vue'
import VC from '@model/VC'
import i18n from '@src/locales'

enum BizCustomerTagSelectEmitEventName {
  Change = 'change'
}

@Component({ 
  name: ComponentNameEnum.BizCustomerTagSelect
})
export default class BizCustomerTagSelect extends VC {
  
  // 客户标签列表
  private customerTags: CustomerTag[] = []
  // 选择的客户标签列表
  private customerSelectedTags: string[] = []
  
  /** 
   * @description 修改选择客户标签完成回调
  */
  @Emit(BizCustomerTagSelectEmitEventName.Change)
  private emitChangeCustomerSelectedTagsHandler() {
    return this.customerSelectedTags
  }
  
  private changedCustomerSelectedTagsHandler(value: string[]): void {
    this.customerSelectedTags = value
    const Track = Vue.prototype.$track;
    Track.clickStat(Track.formatParams('CUSTOMER_TAG_FILTER'))
  }
  
  /**
   * @description 获取客户标签列表
   * @return {void}
   */
  private fetchCustomerTagList(): void {
    getCustomerTagList().then(data => {
      if (!data?.success) {
        return Platform.alert(data?.message)
      }
      
      // @ts-ignore
      const tags: CustomerTag[] = data?.data || []
      
      this.customerTags = tags
    })
  }
  
  /**
   * @description: 下拉框出现/隐藏时触发
   * @param {visible} 出现则为 true，隐藏则为 false
   * @return {void}
  */  
  private visibleHandler(visible: boolean): void {
    if (visible) return
    
    this.emitChangeCustomerSelectedTagsHandler()
  }
  
  mounted() {
    this.fetchCustomerTagList()
  }
  
  render(h: CreateElement) {
    return (
      <div class={ComponentNameEnum.BizCustomerTagSelect}>
        <el-dropdown trigger="click" onVisible-change={(visible: boolean) => this.visibleHandler(visible)}>
          <span class="el-dropdown-link cur-point">
            {i18n.t('customer.customerTagDropDown.label')}
            <i class="iconfont icon-fdn-select"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-checkbox-group
              class="customer-tag-select-checkbox-group"
              value={this.customerSelectedTags} 
              onInput={(value: string[]) => this.changedCustomerSelectedTagsHandler(value)}
            >
            {
              this.customerTags.map(tag => {
                return (
                  <el-checkbox
                    key={tag.id}
                    label={tag.id}
                  >
                    { tag.tagName }
                  </el-checkbox>
                )
              })
            }
            </el-checkbox-group>
            <el-tooltip content={i18n.t('customer.customerTagDropDown.helpTip')} placement="top" popper-class="customer-tag-tip-popper">
              <div class="biz-customer-tag-tip">
                {i18n.t('customer.customerTagDropDown.help')}<i class="el-icon-question"></i>
              </div>
            </el-tooltip>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    )
  }
}

